<template>
  <div class="flow-chart">
    <div>
      <el-button type="primary" @click="handleGetCanvasData">
        获取画布数据
      </el-button>
      <el-button type="primary" @click="handleScale">放大</el-button>
      <el-button type="primary" @click="handleScale2">缩小</el-button>
      <el-button type="primary" @click="handleScale3">还原</el-button>
      <el-button type="primary" @click="handleScale4">
        图形移到画布中心
      </el-button>
      <el-button type="primary" @click="handleAdd"> 添加节点 </el-button>
    </div>
    <div id="container"></div>
  </div>
</template>

<script lang="ts" setup>
import LogicFlow from "@logicflow/core";
import "@logicflow/core/dist/index.css";
const data = {
  // 节点
  nodes: [
    {
      id: "50",
      type: "rect",
      x: 100,
      y: 150,
      text: "你好",
    },
    {
      id: "21",
      type: "circle",
      x: 300,
      y: 150,
    },
  ],
  // 边
  edges: [
    {
      type: "polyline",
      sourceNodeId: "50",
      targetNodeId: "21",
    },
  ],
};
let lf: LogicFlow;
let scale = 1;
const handleScale = () => {
  if (scale >= 2) {
    scale = 2;
    return;
  }
  scale += 0.2;
  lf.zoom(scale);
};
const handleScale2 = () => {
  if (scale <= 0.2) {
    scale = 0.2;
    return;
  }
  scale -= 0.2;
  lf.zoom(scale);
};
const handleScale3 = () => {
  scale = 1;
  lf.zoom(scale);
};
const handleScale4 = () => {
  lf.focusOn({
    id: "50",
  });
};

const handleGetCanvasData = () => {
  const data = lf.getGraphData();
  console.log(data);
};

const handleAdd = () => {
  //  type: 'rect' | 'circle' | 'diamond' | 'ellipse' | 'polygon' | 'html' | 'node' | 'customNode'
  lf.addNode({
    type: "html",
    x: 200,
    y: 200,
    text: "测试节点",
  });
};

onMounted(() => {
  lf = new LogicFlow({
    container: document.querySelector("#container") as HTMLElement,
    stopScrollGraph: true,
    stopZoomGraph: true,
    width: 1500, // 画布宽度 默认 100%
    height: 800, // 画布高度 默认 100%
    background: {
      // image?: string; // 背景图片地址
      // color?: string; // 背景色
      // repeat?: string; // 背景图片重复
      // position?: string; // 背景图片位置
      // size?: string; // 背景图片尺寸
      // opacity?: number; // 背景透明度
      color: "#F0F0F0",
    },
    grid: {
      // size?: number // 栅格
      // visible?: boolean, // 是否可见，false则隐藏网格线但是保留栅格效果
      // type?: 'dot' | 'mesh', // 网格样式，目前内置支持点状'dot'和网格'mesh'
      // config?: {
      //   color: string, // 网格颜色
      //   thickness?: number, // 网格线宽度
      // }
      type: "mesh",
      size: 20,
      config: {
        color: "#BDBDBDFF",
        thickness: 1,
      },
    },
    // 工具配置
    textEdit: true, // 是否开启文本编辑
    isSilentMode: false, // 是否开启静默模式, 只可浏览不可编辑
    edgeType: "line", // 默认连线方式 line polyline
    snapline: true,
    // 样式配置
    style: {
      rect: {
        radius: 6,
      },
    },
  });
  lf.render(data);
});
</script>
<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
</style>
